<!DOCTYPE html>

<html>
<head>
<title>Layout Manager</title>
<style>
div {
margin: 0;
padding: 0;
}

#frame {
width: 400px;
height: 300px;
border: 3px solid black;
overflow: hidden;
}
</style>

<link type="text/css" href="resize/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="resize/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="resize/jquery-ui-1.7.1.custom.min.js"></script>

<!--
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
-->

<script src="../jslayout.js"></script>
<script src="_examples.js"></script>
<script src="sizzle/sizzle.js"></script>

<script>

onContent(function () {
	// node references
	var frame = document.getElementById('frame');

	// initialize layout
	var layout = new LayoutManager(frame);
	Sizzle('.grid, .column', document).forEach(function (element) {
		layout.setFlexibleProperty(element, 'height');
		layout.setFlexibleProperty(element, 'width');
	});
	layout.setOrientation(Sizzle('.grid', document)[0], 'horizontal');
	layout.calculate();
	
	$('#frame').resizable().bind('resize', function () {
		layout.recalculate();
	});

	window.resizeFrame = function () {
		frame.style.width = prompt('Width:', 400) + 'px';
		frame.style.height = prompt('Height:', 300) + 'px';
		alert('Now recalculating layout.');
		layout.recalculate();
	}
});

</script>
</head>

<body>
<button onclick="resizeFrame()">Set Frame Size</button>
<div id="frame">
<div class="grid">
<div class="column" style="background: red">This is a column. This is a column. This is a column.</div>
<div class="column" style="background: blue">This is a column. This is a column. This is a column.</div>
<div class="column" style="background: green">This is a column. This is a column. This is a column.</div>
</div>
</div>
</body>
</html>